<template>
  <div>
      <!-- <h1>搜索</h1> -->
      <input type="text" v-model="kw">
      <button>搜索</button>
      <div v-for="item in arr" :key="item.id">
        <img :src="$pre+item.img" alt="">
        <h2>{{item.goodsname}}</h2>
        <span>{{item.price}}</span>
      </div>

  </div>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return {
      kw:"",
      arr:[]
    }
  },
  watch:{
    kw(){
      if(this.kw == null){
        this.arr = [];
        return;
      }
      axios({
        url:"/api/search",
        method:"get",
        params:{
          keywords:this.kw
        }
      }).then(res=>{
        // console.log(res);
        this.arr = res.data.list;
      })
    }
  }
}
</script>

<style scoped>
img{
  width: 4rem;
  height: 3rem;
}

</style>